/** * @description: 辅导员信息-用于查询，用于辅导员页面展示 */
<template>
  <div>
    <div v-for="(item, index) of instructorList" :key="index" :class="[index > 0 ? 'van-hairline--top' : '', 'content']">
      <div class="content-top">
        <p>
          <i>{{ item.fdyName ? item.fdyName.slice(0, 1) : '-' }}</i>
          <span>
            {{ item.fdyName || '--' }}
          </span>
        </p>
        <p>
          <span>{{ item.allNums || 0 }}</span>
          <label>人</label>
        </p>
      </div>
      <div class="content-bottom">
        <p>
          <span>{{ item.difficultStuNums || 0 }}</span>
          <label>五困生人数</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.proportion || 0 }}<i>%</i></span>
          <label>五困生占比</label>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Instructor',
  props: ['instructorList'],
}
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 20px;
  .content-top {
    @include fcb();
    p {
      i {
        display: inline-block;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background: #2e6cf6;
        border-radius: 50%;
        font-size: $fz12;
        margin-right: 12px;
        color: #fff;
      }
      span {
        font-size: $fz22;
        color: $color-title;
      }
      label {
        font-size: $fz12;
        color: $color-title;
        margin-right: 10px;
      }
    }
    p:first-child {
      @include fh();
    }
  }

  .content-bottom {
    @include fca();
    padding-top: 25px;
    p {
      flex: 1;
      text-align: center;
      span,
      label {
        display: block;
      }
      span {
        font-size: $fz20;
        text-align: center;
        i {
          font-size: $fz12;
        }
      }
      label {
        font-size: $fz12;
        color: #97979f;
        margin-top: 8px;
      }
    }
  }
}
.content + .content {
  padding-top: 15px;
}
</style>
